<template>
    <div class="siteSingleTable">
        <div class="">
            <el-divider class="topLine"><i class="lineIcon el-icon-document-copy"></i><span
                        class="lineTitle">独立信息设置列表</span></el-divider>
        </div>

        <div class="batchOPT">
            <el-button class="batchBTN" @click="toggleSelection([siteSingles[1],siteSingles[2]])">批量删除</el-button>
        </div>
        <div class="addSiteSingle">
            <el-button class="addBTN" type="primary" icon="el-icon-circle-plus-outline" @click="addSiteSingle">新增
            </el-button>
        </div>
        <!--:data绑定data中预设的参数
        单行显示:show-overflow-tooltip="true"
        如果为tr，则需要v-for="(siteSingle,index) of siteSingles" :key="index"
        -->
        <el-table
                ref="multipleTable"
                tooltip-effect="dark"
                @selection-change="handleSelectionChange"
                :data="siteSingles"
                :show-overflow-tooltip="true"
                border
                style="width: 100%"
                class="previous-row"
                :header-cell-style="{backgroundImage:'linear-gradient(#ff6e02,#ff6d00)',color:'#ffffff',}"
        >

            <el-table-column type="selection" width="35">
            </el-table-column>
                <el-table-column
                        sortable
                        fixed
                        prop="uniId"
                        label="ID"
                        width="60"
                        :show-overflow-tooltip="true"
                >
                </el-table-column>

                <el-table-column
                        sortable
                        fixed
                        prop="name"
                        label="信息名称"
                        width="100"
                        :show-overflow-tooltip="true"
                >
                </el-table-column>

                <el-table-column
                        sortable
                        fixed
                        prop="tag"
                        label="信息标签"

                        :show-overflow-tooltip="true"
                >
                </el-table-column>

                <el-table-column
                        sortable
                        fixed
                        prop="createTime"
                        label="创建时间"
                        width="170"
                        :show-overflow-tooltip="true"
                >
                </el-table-column>

                <el-table-column
                        sortable
                        fixed
                        prop="updateTime"
                        label="修改时间"
                        width="170"
                        :show-overflow-tooltip="true"
                >
                </el-table-column>

            <el-table-column
                    class="optionList"
                    fixed="right"
                    label="操作"
                    width="170">
                <!--使用slot-scope传递当前行参数-->
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="primary"
                            @click="edit(scope.row)">编辑
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="del(scope.row)">删除
                    </el-button>
                </template>

            </el-table-column>
        </el-table>

        <div class="pageHelper">
            <el-button class="flushBTN" type="primary" @click="pageList(1)">刷新数据</el-button>
            <page-helper ref="pageHelper" :list="pageList"></page-helper>

        </div>

        <div class="editSingle">
            <el-dialog :visible.sync="dialogFormVisible" :close-on-click-modal="false" class="dialogDef">
                <div slot="title" class="header-title">
                    <div style="padding:15px 20px;">{{this.dialogTitle}}</div>
                </div>
                <!--绑定校验规则，必须这里:model绑定模块，ref做别名，:rules指定规则-->
                <el-form v-model="siteSingle" :model="siteSingle" ref="siteSingle" :rules="rules" status-icon>
                    <el-form-item :label="labelName" :label-width="formLabelWidth" prop="name">
                        <el-input class="inputWidth" v-model="siteSingle.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item :label="labelContent" :label-width="formLabelWidth" prop="tag">
                        <el-input class="inputWidth" v-model="siteSingle.tag"></el-input>
                    </el-form-item>
                    <el-form-item :label="labelLargeContent" :label-width="formLabelWidth" prop="content">
                        <el-input class="inputContent" id="content" v-model="siteSingle.content"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="save('siteSingle')">保 存</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import PageHelper from "../../../components/PageHelper";

    export default {
        name: "SiteSingleSet",
        //引用组件
        components: {PageHelper},
        data() {
            let nameValidate = (rule, value, callback) => {
                function getLength(str) {
                    //如果为中文，替换为ccc，1个中文字符计算长度=1
                    return str.replace(/[^x00-xff]/g, 'c').length || '';
                }
                if (value === '' || value===undefined || value===null) {
                    callback(new Error("信息名称不能为空"));
                } else if (getLength(value) < 3) {
                    callback(new Error("信息名称长度至少3位"));
                } else {
                    callback();
                }
            };
            let tagValidate = (rule, value, callback) => {
                function getLength(str) {
                    //如果为中文，替换为ccc，1个中文字符计算长度=1
                    return str.replace(/[^x00-xff]/g, 'c').length;
                }
                if (value === '' || value===undefined || value===null) {
                    callback(new Error("标签不能为空"));
                } else if (getLength(value) < 3) {
                    callback(new Error("标签长度至少3位"));
                } else {
                    callback();
                }
            };
            return {
                rules: {
                    name: [
                        {validator: nameValidate, trigger: 'blur'}
                    ],
                    tag: [
                        {validator: tagValidate, trigger: 'blur'}
                    ],
                },
                message: '这里是独立信息设置表内容页',
                siteSingles: [],
                siteSingle:{},
                options: VIDEO_TYPE,
                charge: VIDEO_CHARGE,
                isShow: YES_OR_NO,
                level: LEVEL,
                status: STATUS,
                //edit模态框
                dialogFormVisible: false,
                dialogType: "", //对话框类型：添加add/更新edit
                dialogTitle: '',
                labelName: '',
                disabled: 'disabled',
                labelContent: '',
                labelLargeContent:'',
                formLabelWidth: '120px',

            }
        },
        mounted() {
            //1.普通列表查询
            this.list();
            //自定义赋值分页每页行数
            this.$refs.pageHelper.size = 10;
            //2.分页列表查询，默认初始化执行第一页
            this.pageList(1);

        },
        methods: {
            //多选的方法
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //1.list查询
            list() {
                this.$axios.get(process.env.VUE_APP_SERVER + '/system/admin/siteSingle/dtoList')
                    .then((response) => {
                        console.log("模块-独立信息设置表列表：", response);
                    })
            },
            //2.查询当前页，需要设置变量传入pageHelper分页插件
            pageList(page) {
                Loadings.show();
                this.$axios.post(process.env.VUE_APP_SERVER + '/system/admin/siteSingle/pageList', {
                    currentPage: page, //向后端发送参数。当前页
                    size: this.$refs.pageHelper.size, //引用传入组件后，在标签中refs定义的别名
                }).then((response) => {
                    Loadings.hide();
                    let resp = response.data;
                    this.siteSingles = resp.responseData.listPageData;
                    this.$refs.pageHelper.render(page, resp.responseData.totalSize);

                })
            },
            //3.新增siteSingle
            addSiteSingle() {
                this.siteSingle = {};
                this.dialogFormVisible = true;
                this.dialogTitle = "新增独立信息";
                this.labelName = "信息名称";
                this.labelContent = "信息标签";
                this.labelLargeContent="信息内容";
                //获取文件分片大小
                function getShardFile(shardIndex, shardSize,files){
                    let _this = this;
                    let file = files;
                    let start = (shardIndex - 1) * shardSize; //分片起始大小
                    let end = Math.min(file.size, start + shardSize);
                    //从start→end截取当前的分片数据
                    let shardFile = file.slice(start, end);
                    return shardFile;
                }
                function upload(param,file){
                    let shardTotal = param.shardTotal;
                    let shardIndex = param.shardIndex;
                    let shardSize = param.shardSize;
                    let files=file;
                    let shardFile = getShardFile(shardIndex, shardSize,files);
                    let token = Tool.getEmpLogin().token;
                    let fileReader = new FileReader();
                    Progress.show(parseInt((shardIndex - 1) * 100 / shardTotal));
                    //先加载fileReader，读取到e，再进行数据shardFile转换
                    fileReader.onload = function (e) {
                        let base64 = e.target.result;
                        param.shard = base64;
                        $.ajax({
                            url: 'http://127.0.0.1:8899/source/admin/oss/append',//后台文件上传接口
                            type: 'POST',
                            data: JSON.stringify(param), //转json上传fileDto对象
                            dataType: "json",
                            headers: {
                                'token': token, //加入请求头token校验
                            },
                            processData: false,
                            contentType: "application/json;charset=UTF-8",
                            success: function (data) {
                                let resp = data.data;
                                Progress.show(parseInt(shardIndex * 100 / shardTotal));
                                //判断分片的shardIndex和shardTotal值，是否分片上传完毕
                                if (shardIndex < shardTotal) {
                                    param.shardIndex = param.shardIndex + 1;
                                    upload(param);
                                } else {
                                    Progress.hide();
                                    $('#content').summernote('insertImage', data.responseData.path, 'img');
                                }
                            }
                        });
                    }
                    //需要放在fileReader之后，生成shardFile
                    fileReader.readAsDataURL(shardFile);
                }

                //1.初始化富文本
                $("#content").summernote({
                    lang: 'zh-CN',
                    focus: true,
                    height: 300,
                    //自定义工具栏
                    toolbar: [
                        ['style', ['style']],
                        ['font', ['bold', 'italic', 'underline', 'clear', 'strikethrough', 'superscript', 'subscript']],
                        ['fontname', ['fontname']],
                        ['color', ['color']],
                        ['para', ['ul', 'ol', 'paragraph', 'fontsize', 'height', 'hr']],
                        ['table', ['table']],
                        ['insert', ['link', 'picture', 'video']],//插入集合
                        ['view', ['codeview', 'help']]
                    ],
                    callbacks: {
                        //这里原生js暴露的方法名必须相同
                        onImageUpload: function (files) {

                            let _this = this;
                            let file = files[0];
                            let formData = new FormData();
                            formData.append('file', file);
                            let token = Tool.getEmpLogin().token;

                            /*************************************************************/
                            let shardKey16 = hex_md5(file.name + file.size + file.type); //md5:16进制处理file
                            let shardKey10 = parseInt(shardKey16, 16);//转换为10进制
                            //62进制(短key)：26个大写字母+26个小写字母+10个阿拉伯数字
                            let shardKey62 = Tool.md_10to64(shardKey10);

                            //file类型判断["jpg","jpeg","png","gif"]
                            let suffixType = ["jpg", "jpeg", "png", "gif"];
                            let fileName = file.name;
                            let suffix = fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length).toLowerCase();
                            let validateSuffix = false;
                            //循环后缀类型
                            for (let i = 0; i < suffixType.length; i++) {
                                if (suffixType[i].toLowerCase() === suffix) {
                                    validateSuffix = true;
                                    break;
                                }
                            }
                            if (!validateSuffix) {
                                toast.warning("文件格式不正确，只支持上传：" + suffixType.join(",") + "文件");
                                return;
                            }

                            //文件分片shard
                            let shardSize = 1024 * 1024; //每1MB为一个分片，
                            let startIndex = 1; //分片起始索引，1为第一个分片
                            let size = file.size;//文件大小
                            let shardTotal = Math.ceil(size / shardSize);//分片总数，向上取整1.1=2
                            let contentType = file.type;
                            /**
                             * 统一请求参数，使用formData传递，需要将file中的shardFile转为base64的字符串string
                             * fileReader加载时，接收参数e,转为base64 = e.target.result
                             * base64字符串：文件说明+","+base64码(文件内容)
                             * 在fileReader包裹后，需要_this=this;
                             */
                            let param = {
                                'size': size,
                                'shardIndex': startIndex,
                                'shardSize': shardSize,
                                'shardTotal': shardTotal,
                                'name': file.name,
                                'suffix': suffix,
                                'shardKey': shardKey62,
                                'contentType': contentType,
                                'moduleId': '',
                                'useType': 'T',
                            };
                            $.ajax({
                                url: 'http://127.0.0.1:8899/source/admin/check/file/' + param.shardKey,//后台文件上传接口
                                type: 'GET',
                                headers: {
                                    'token': token,
                                },
                                success: function (data) {
                                    let fileDto = data.responseData;
                                    if (!fileDto) {
                                        param.shardIndex = 1;
                                        upload(param,file);

                                    } else if (fileDto.shardIndex === fileDto.shardTotal) {
                                        toast.success("文件急速秒传成功！");
                                        $('#content').summernote('insertImage', data.responseData.path, 'img');
                                    } else {
                                        param.shardIndex = fileDto.shardIndex + 1;
                                        upload(param,file);
                                    }
                                }
                            });
                        },

                    }
                })
                //2.获取当前module的富文本内容
                $("#content").summernote('code','');
            },
            //4.修改
            edit(siteSingle) {
                //1.初始化富文本
                $("#content").summernote({
                    lang: 'zh-CN',
                    focus: true,
                    height: 300,
                    //自定义工具栏
                    toolbar: [
                        ['style', ['style']],
                        ['font', ['bold', 'italic', 'underline', 'clear', 'strikethrough', 'superscript', 'subscript']],
                        ['fontname', ['fontname']],
                        ['color', ['color']],
                        ['para', ['ul', 'ol', 'paragraph', 'fontsize', 'height', 'hr']],
                        ['table', ['table']],
                        ['insert', ['link', 'picture', 'video']],//插入集合
                        ['view', ['codeview', 'help']]
                    ],
                    callbacks: {
                        //这里原生js暴露的方法名必须相同
                        onImageUpload: function (files) {
                            let _this = this;
                            let file = files[0];
                            let formData = new FormData();
                            formData.append('file', file);
                            let token = Tool.getEmpLogin().token;

                            /*************************************************************/
                            let shardKey16 = hex_md5(file.name + file.size + file.type); //md5:16进制处理file
                            let shardKey10 = parseInt(shardKey16, 16);//转换为10进制
                            //62进制(短key)：26个大写字母+26个小写字母+10个阿拉伯数字
                            let shardKey62 = Tool.md_10to64(shardKey10);

                            //file类型判断["jpg","jpeg","png","gif"]
                            let suffixType = ["jpg", "jpeg", "png", "gif"];
                            let fileName = file.name;
                            let suffix = fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length).toLowerCase();
                            let validateSuffix = false;
                            //循环后缀类型
                            for (let i = 0; i < suffixType.length; i++) {
                                if (suffixType[i].toLowerCase() === suffix) {
                                    validateSuffix = true;
                                    break;
                                }
                            }
                            if (!validateSuffix) {
                                toast.warning("文件格式不正确，只支持上传：" + suffixType.join(",") + "文件");
                                return;
                            }

                            //文件分片shard
                            let shardSize = 1024 * 1024; //每1MB为一个分片，
                            let startIndex = 1; //分片起始索引，1为第一个分片
                            let size = file.size;//文件大小
                            let shardTotal = Math.ceil(size / shardSize);//分片总数，向上取整1.1=2
                            let contentType = file.type;
                            /**
                             * 统一请求参数，使用formData传递，需要将file中的shardFile转为base64的字符串string
                             * fileReader加载时，接收参数e,转为base64 = e.target.result
                             * base64字符串：文件说明+","+base64码(文件内容)
                             * 在fileReader包裹后，需要_this=this;
                             */
                            let param = {
                                'size': size,
                                'shardIndex': startIndex,
                                'shardSize': shardSize,
                                'shardTotal': shardTotal,
                                'name': file.name,
                                'suffix': suffix,
                                'shardKey': shardKey62,
                                'contentType': contentType,
                                'moduleId': '',
                                'useType': 'T',
                            };
                            $.ajax({
                                url: 'http://127.0.0.1:8899/source/admin/check/file/' + param.shardKey,//后台文件上传接口
                                type: 'GET',
                                headers: {
                                    'token': token,
                                },
                                success: function (data) {
                                    let fileDto = data.responseData;
                                    if (!fileDto) {
                                        param.shardIndex = 1;
                                        upload(param,file);

                                    } else if (fileDto.shardIndex === fileDto.shardTotal) {
                                        toast.success("文件急速秒传成功！");
                                        $('#content').summernote('insertImage', data.responseData.path, 'img');
                                    } else {
                                        param.shardIndex = fileDto.shardIndex + 1;
                                        upload(param,file);
                                    }
                                }
                            });
                        },

                    }
                })
                /*jquery继承对象： $.extend({新对象},旧对象)
                避免vue数据绑定漏洞，更改数据时，随之更改显示的data，但实际没有进行真实保存数据库
                 */
                //2.获取当前module的富文本内容
                this.siteSingle=$.extend({},siteSingle);
                $("#content").summernote('code', this.siteSingle.content);

                this.siteSingle = $.extend({}, siteSingle);
                this.dialogFormVisible = true;
                this.dialogTitle = "编辑独立信息";
                this.labelName = "信息名称";
                this.labelContent = "信息标签";
                this.labelLargeContent="信息内容";
                //获取文件分片大小
                function getShardFile(shardIndex, shardSize,files){
                    let _this = this;
                    let file = files;
                    let start = (shardIndex - 1) * shardSize; //分片起始大小
                    let end = Math.min(file.size, start + shardSize);
                    //从start→end截取当前的分片数据
                    let shardFile = file.slice(start, end);
                    return shardFile;
                }
                function upload(param,file){
                    let shardTotal = param.shardTotal;
                    let shardIndex = param.shardIndex;
                    let shardSize = param.shardSize;
                    let files=file;
                    let shardFile = getShardFile(shardIndex, shardSize,files);
                    let token = Tool.getEmpLogin().token;
                    let fileReader = new FileReader();
                    Progress.show(parseInt((shardIndex - 1) * 100 / shardTotal));
                    //先加载fileReader，读取到e，再进行数据shardFile转换
                    fileReader.onload = function (e) {
                        let base64 = e.target.result;
                        param.shard = base64;
                        $.ajax({
                            url: 'http://127.0.0.1:8899/source/admin/oss/append',//后台文件上传接口
                            type: 'POST',
                            data: JSON.stringify(param), //转json上传fileDto对象
                            dataType: "json",
                            headers: {
                                'token': token, //加入请求头token校验
                            },
                            processData: false,
                            contentType: "application/json;charset=UTF-8",
                            success: function (data) {
                                let resp = data.data;
                                Progress.show(parseInt(shardIndex * 100 / shardTotal));
                                //判断分片的shardIndex和shardTotal值，是否分片上传完毕
                                if (shardIndex < shardTotal) {
                                    param.shardIndex = param.shardIndex + 1;
                                    upload(param);
                                } else {
                                    Progress.hide();
                                    $('#content').summernote('insertImage', data.responseData.path, 'img');
                                }
                            }
                        });
                    }
                    //需要放在fileReader之后，生成shardFile
                    fileReader.readAsDataURL(shardFile);
                }
            },
            save(formName) {
                let responseMsg = '';
                //获取富文本
                this.siteSingle.content=$("#content").summernote('code');
                //前端校验
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$axios.post(process.env.VUE_APP_SERVER + '/system/admin/siteSingle/save', this.siteSingle)
                            .then((response) => {
                                let resp = response.data;
                                responseMsg = response;
                                if (resp.success) {
                                    //关闭对话框
                                    this.dialogFormVisible = false;
                                    this.pageList(1);
                                    toast.success("保存成功", "bottom-end");
                                } else {
                                    this.$notify({
                                        title: '填写内容错误',
                                        message: resp.responseMsg,
                                        position: "top-right",
                                        type: 'warning'
                                    });
                                }
                            })
                    } else {
                        this.$notify({
                            title: '填写内容错误',
                            message: '请按照提示内容填写正确信息',
                            position: "top-right",
                            type: 'warning'
                        });
                        return false;
                    }
                })
            },
            del(siteSingle) {
                /**
                 * 前端=》路径内携带参数使用url：'../'+{param}
                 * 后端=》requestMapping('../{param}')
                 *       void ...(@PathVariable String {param})
                 *
                 * ***引用toast的showConfirm全局方法，需要定义局部变量_this
                 * ***并且将存入的siteSingle转化为局部对象，才能获取到uniId
                 */
                let _this = this;
                let siteSingleParam =siteSingle;
                toast.showConfirm(siteSingle.name, function () {
                    _this.$axios.delete(process.env.VUE_APP_SERVER + '/system/admin/siteSingle/del/' + siteSingleParam.uniId)
                        .then((response) => {

                            let resp = response.data;
                            if (resp.success) {
                                _this.pageList(1);
                            }
                        })

                }
            )
            },
            //更新显示show
            updateShow(row) {
                this.siteSingle=row;
                let responseMsg='';
                //前端校验
                this.$axios.post(process.env.VUE_APP_SERVER + '/system/admin/siteSingle/save', this.siteSingle)
                    .then((response) => {
                        let resp = response.data;
                        responseMsg = response;

                        if (resp.success) {
                            this.pageList(1);
                            //引入全局变量toast提示
                            toast.success("保存成功", "bottom-end");
                        } else {
                            this.$notify({
                                title: '修改失败，请联系管理员!',
                                message: resp.responseMsg,
                                position: "top-right",
                                type: 'warning'
                            });
                        }
                    });
            },
        }
    }
</script>

<style scoped>
    /*顶部line样式*/
    .topLine {
        background-color: #2a92ee;
    }

    .lineIcon {
        font-size: 22px;
        color: #2a92ee;
        position: relative;
    }

    .lineTitle {
        position: relative;
        font-size: 16px;
        color: #2a92ee;
    }

    /*table样式*/
    .previous-row {
        background: #f0f9eb;
        margin-left: 2%;
        max-width: 96%;

    }

    .optionList {
        text-align: center;
    }

    /deep/ .el-table td, .el-table th {
        padding: 5px 0;
        text-align: center;
    }

    /deep/ .el-table .cell {
        padding-right: 2px;
        line-height: 20px;
        text-align: center;

    }

    /deep/ .el-table .cell, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell {
        padding-left: 5px;
    }

    /*批量操作*/
    .batchOPT {
        float: left;
        margin-left: 2%;
        margin-bottom: 1%;
        z-index: 1;
    }

    /*新增*/
    .addSiteSingle {
        float: left;
        margin-left: 5px;
    }

    .addBTN {
        font-size: 16px;
        padding: 11px 20px;
        border: 1px solid white;
        box-shadow: 1px 2px 2px #409eff;
        margin-top: 0;
    }

    .batchBTN {
        background-color: #ff5202;
        color: white;
        box-shadow: 1px 2px 2px #ff6e02;
    }

    .batchBTN:hover {
        background-color: #ff3d02;
        color: white;
    }

    .batchBTN:focus {
        background-color: #ff3d02;
        color: #ffffff;
    }

    /**分页位置/
     */
    .pageHelper {
        margin-left: 60px;
    }

    .flushBTN {
        position: relative;
        float: left;
        max-width: 95px;
        margin-right: 20px;
        margin-top: 5px;
    }

    /*模态框*/
    .header-title {
        background: #2589e7;
        color: white;
        font-size: 20px;
    }
    /*限制模态框高度*/
    /*.dialogDef{
        height: 100%;
    }*/

    /deep/ .el-dialog__header {
        padding: 0;
    }

    /deep/ .el-dialog--center .el-dialog__body {
        background: #d2d3d04d;
    }

    /deep/ .el-dialog__headerbtn .el-dialog__close {
        color: white;
        font-size: 24px;
    }

    /deep/ .el-form-item__label {
        text-align: center;
        padding: 0;
    }

    /deep/ .el-input .el-input__inner {
        margin-left: -40px;
    }

    /deep/ .el-input__suffix {
        right: 35px;
    }

    /deep/ .el-dialog__body {
        padding: 20px 10px;
    }

    /deep/ .el-form-item {
        margin-bottom: 5px;
    }

    .inputWidth{
        max-width:500px;
        float: left;
    }
    /*提示框的字符颜色*/
    /deep/ .el-form-item__error {
        float: left;
        position: relative;
        line-height: 30px;
        margin-left: 10px;
    }
    /deep/ .el-input__prefix, .el-input__suffix {
        color: #44cd3f;
        font-size: 18px;
    }

    /deep/ .el-input__icon {
        color: #44cd3f;
        font-size: 18px;
    }
    /*富文本*/
    .inputContent{
        margin-left: -40px;
    }
    /*图片上传：取消upload打开的input默认按钮 ，这里的margin-top按需调整*/
    /deep/ input[type=file] {
        display: block;
        margin-top: -40px;
        margin-left: -400px;
    }

</style>